<template>
  <div class="third">
    <div class="third-right">
      <div class="third-top">
        <h1>工作量统计
          <el-date-picker size="small" :clearable="false"
                          v-model="dateTime" @change="getWork"
                          type="daterange" value-format="yyyy-MM-dd"
                          range-separator="-"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
          </el-date-picker>
        </h1>
        <el-select v-model="userIDWork" @change="handleChangeWork">
          <el-option label="全部" value="">全部</el-option>
          <el-option v-for="item,index in customer" :key="index"
                     :label="item.name" :value="item.id">{{item.name}}
          </el-option>
        </el-select>
      </div>
      <div class="third-content">
        <el-table :data="tableData" border height="200" v-show="tableData.length>0"
                  :summary-method="getSummaries"
                  show-summary style="width: 100%">
          <el-table-column prop="userName" label="员工" align="center">
          </el-table-column>
          <el-table-column prop="custCount" label="新建客户数" align="center">
          </el-table-column>
          <el-table-column prop="followCount" label="新建跟进" align="center">
          </el-table-column>
          <el-table-column prop="orderCount" label="新建订单数" align="center">
          </el-table-column>
          <el-table-column prop="emailCount" label="邮件发送数" align="center">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="third-left">
      <div class="detail">
        <div class="detail-left">
          <div class="country">
            <img :src="require(`../../../public/img/city/${currency}.png`)" alt="">
            <el-select v-model="currencyName" size="small" @change="changeCountry">
              <el-option value="" label="汇算货币" hidden><b>汇算货币</b></el-option>
              <el-option v-for="item,index in rateList" :label="item.currencyName"
                         :value="JSON.stringify(item)">{{item.currencyName}}
              </el-option>
            </el-select>
          </div>
          <h2>{{info.currencyName}}</h2>
          <p class="buyIn"><b>现钞买入价</b></p>
          <h1>{{info.mBuyPrice}}</h1>
          <p style="color: #345A91; font-size: 13px;margin-bottom: 5px !important;">(更新时间：{{info.releaseTime}})</p>
          <ul class="list">
            <li>
              <p><b>现汇买入价</b></p>
              <h3>{{info.fBuyPrice}}</h3>
            </li>
            <li>
              <p><b>现汇卖出价</b></p>
              <h3>{{info.fSellPrice}}</h3>
            </li>
          </ul>
          <ul class="list">
            <li>
              <p><b>现钞卖出价</b></p>
              <h3>{{info.mSellPrice}}</h3>
            </li>
            <li>
              <p><b>中行折算价</b></p>
              <h3>{{info.bankConversionPrice}}</h3>
            </li>
          </ul>
        </div>
        <div class="detail-right">
          <div style="width:90%;height: 300px" id="myEchartLine"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import {getWork, getRateList, getRateEchart} from '@/api/home'
    import {getCurrentMonth} from '@/util/util'

    export default {
        name: "Third",
        props: {
            customer: {
                default: []
            }
        },
        data() {
            return {
                type: '',
                userID: '',
                userIDWork: '',
                dateTime: getCurrentMonth().split(";"),
                tableData: [],
                currencyName: '',
                currency: '美元',
                rateList: [],
                info: {
                    currencyName: '-',
                    mBuyPrice: 0.00,
                    fBuyPrice: 0.00,
                    fSellPrice: 0.00,
                    mSellPrice: 0.00,
                    bankConversionPrice: 0.00
                }
            }
        },
        mounted() {
            //获取汇率列表
            this.getRateList();
            //获取工作量
            this.getWork()
        },
        methods: {
            changeCountry(row) {
                this.info = JSON.parse(row);
                this.currency = this.info.currencyName;
                this.getRateEchart();
                this.currencyName = ''
            },
            //获取汇率列表
            getRateList() {
                getRateList().then(res => {
                    if (res.data.success) {
                        let frag = -1;
                        this.rateList = res.data.data;
                        this.rateList.map((item, index) => {
                            if (item.currencyName == '美元') {
                                this.currency = '美元';
                                frag = index;
                            } else if (item.currencyName == '欧元') {
                                this.currency = '欧元';
                                frag = index;
                            }
                            if (frag != -1) {
                                return;
                            }
                        })
                        if (frag == -1) {
                            this.info = this.rateList[0];
                        } else {
                            this.info = this.rateList[frag];
                        }
                        //获取汇率
                        this.getRateEchart();
                    }
                })
            },
            //获取echart数据
            getRateEchart() {
                getRateEchart(this.currency).then(res => {
                    if (res.data.success) {
                        const result = res.data.data;
                        let time = [], data = [];
                        result.map((item, index) => {
                            time.push(item.releaseTime.substring(5, 10));
                            data.push(item.mBuyPrice);
                        })
                        let option = {
                            tooltip: {
                                trigger: 'axis',
                                formatter: function (params) {
                                    return '日期：' + params[0].name + '<br/>' + '现钞买入价:' + params[0].data;
                                },
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: time,
                                axisLine: {
                                    lineStyle: {
                                        color: '#232323'
                                    }
                                },
                            },
                            yAxis: {
                                scale: true, //纵坐标起始点根据最低值变化
                                type: 'value',
                                axisLabel: {
                                    formatter: function () {
                                        return "";
                                    }
                                },
                                splitLine: {
                                    show: true,
                                    lineStyle: {
                                        color: '#ddd',
                                        width: 1
                                    }
                                },
                                axisLine: {show: true},//轴线不显示
                                axisTick: {show: false},//
                            },
                            calculable: true,
                            series: [{
                                data: data,
                                type: 'line',
                                symbol: 'none',  //取消折点圆圈
                                smooth: true,  //折线平滑
                                lineStyle: {
                                    color: '#8695F0'
                                },
                                areaStyle: {
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [{
                                            offset: 0, color: '#8695F0' // 0% 处的颜色
                                        }, {
                                            offset: 1, color: '#908dfc' // 100% 处的颜色
                                        }],
                                        globalCoord: false // 缺省为 false
                                    }
                                }
                            }]
                        };
                        this.myChart = this.$echarts.init(document.getElementById('myEchartLine'));
                        this.myChart.setOption(option)
                        setTimeout(() => {
                            this.myChart.dispatchAction({
                                type: 'showTip',
                                seriesIndex: 0,  // 显示第几个series
                                dataIndex: 6 // 显示第几个数据
                            });
                        })
                    }

                })

            },
            getWork() {
                const params = {
                    userid: this.userIDWork,
                    startTime: this.dateTime[0],
                    endTime: this.dateTime[1]
                }
                getWork(params).then(res => {
                    if (res.data.success) {
                        let result = res.data.data;
                        this.tableData = result;
                        const long = result.length;
                        if (long < 4) { //纯属样式处理
                            for (let i = 0; i < 4 - long; i++) {
                                const empty = {
                                    custCount: "",
                                    emailCount: "",
                                    followCount: "",
                                    orderCount: "",
                                    userName: ""
                                }
                                this.tableData.push(empty);
                            }
                        }
                    }
                })
            },
            //切换工作量下属客户
            handleChangeWork() {
                this.getWork();
            },
            //切换下属客户
            handleChange() {
                if (this.staticType == 0) {
                    this.getEmailBar();
                } else {
                    this.getSocialBar();
                }
            },
            getSummaries(param) {
                const {columns, data} = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '合计';
                        return;
                    }
                    const values = data.map(item => Number(item[column.property]));
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[index] += '';
                    } else {
                        sums[index] = '';
                    }
                });
                return sums;
            },

        }
    }
</script>

<style lang="scss" scoped>
  $homeColor: #345A91;
  $blueColor: #3399F6;
  .third {
    display: flex;
    margin: 0 0 20px 0;
    justify-content: space-between;


    .third-right {
      width: 46.5%;
      background-color: #fff;
      padding: 15px;
      border-radius: 10px;

      .third-top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        h1 {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 75%;
          background: linear-gradient(91deg, rgba(134, 149, 240, 1) 0%, rgba(165, 175, 242, 1) 100%);
          border-radius: 10px;
          color: #fff;
          font-size: 15px;
          height: 50px;
          padding: 0 15px;

          .el-date-editor--daterange.el-input__inner {
            width: 252px;
          }
        }
      }

      .third-content {
        margin-top: 15px;
      }
    }
  }

  @media screen and (max-width: 1279px) {
    .third .third-right {
      width: 46%;
    }
    .third .third-right .third-top h1 {
      width: 70% !important;
      font-size: 14px;
    }
  }
</style>
